
import {useState} from 'react'
import store from  '../store/index'
//检查state发生变化时
import { useSelector} from 'react-redux'

function Counter(){
     //监察state发生变化时 会被调用
    let data = useSelector(()=>{
        console.log(store.getState())
        return  store.getState()
    })
    let [val,setVal] = useState(0)

    let handleChange=(e)=>{
        let num2 = e.target.value;
         setVal(num2);
    }

    let add=()=>{
      
       store.dispatch({type:"add",payload:{"num":val}})
       //console.log(store.getState(),"====>>counter"); 
      
    }


    return(   
        <>
        <h1>你点击了：{data.value} 次</h1>
        <select value={val} onChange={handleChange}>
            <option value={1}>1</option>
            <option value={2}>2</option>
            <option value={3}>3</option>
            <option value={4}>4</option>
            <option value={5}>5</option>
        </select>
        <button onClick={add}>加</button>
        <button>减</button>
        <button>乘</button>
        <button>除</button>
        </>
    )
}

export default  Counter;